<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Registration Form</title>
        <link rel="shortcut icon" href="styles/images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="styles/registration_test.css">
        <link rel="stylesheet" type="text/css" href="styles/header-footer.css">
        <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <!-- Main Wrapper -->
        <div class="mainWrapper"> 
            <div data-template="header"></div> <!-- Main Header -->
            
            <div class="content" data-rndbackground="DSC_0043.jpg"> <!-- Content -->

                <div id="formWrapper"> <!-- Begining of Registration Form (Wrapper) -->
                    <a href="index.html" title="Close"><img src="styles/images/close.png" class="closeRegistrationForm"></a>
                    <h2 id="title">Sign up</h2>

                    <form id="registrationForm" name="registrationForm" method="POST" action="index.html" onsubmit="return checkForm()">

                            <div class="inputArea">
                                <label for="userName">
                                    <span class="textBeforeInput">Email:</span>
                                </label>
                                <span>
                                    <input type="text" id="userName" name="userEmail" class="registrationInputs" data-validation="email">
                                </span>
                                <span class="helperInput">Enter Your valid email</span>
                                <span id="emailError" class="errorMessage hidden"></span>
                            </div>

                            <div class="inputArea">
                                <label for="userNick">
                                    <span class="textBeforeInput">Nickname:</span>
                                </label>
                                <span>
                                    <input onkeyup="return checkNick()" type="text" id="userNick" name="userNick" class="registrationInputs" data-validation="nickname">
                                </span>
                                <span class="helperInput">3-15 symbols</span>
                                <span id="nickError" class="errorMessage hidden"></span>
                            </div>

                            <div class="inputArea">
                                <label for="userPassword">
                                    <span class="textBeforeInput">Password:</span>
                                </label>
                                <span>
                                    <input type="password" id="userPassword" name="userPassword" class="registrationInputs" data-validation="password">
                                </span>
                                <span class="helperInput">6-15 symbols, must contain 1 number</span>
                                <span id="passError" class="errorMessage hidden"></span>
                            </div>

                            <input type="submit" value="Register" class="defaultButton">

                            <div class="registerUser">
                                Already a member? <a href="login_test.html">Log in!</a> 
                            </div>
                    </form>
                </div> <!-- End of Registration Form (Wrapper)-->
            </div> <!-- End of Content -->

            <div data-template="footer"></div> <!-- Main Footer -->
            
        </div> <!-- End of Main Wrapper -->


        <script>
            function confirmPass() {
                var pass1 = dom('#userPassword').elements[0].value;
                var pass2 = dom('#userPasConfirm').elements[0].value;
                if (pass1 != pass2) {
                    dom("#passConfirmError").html('Passwords must coincide');
                    /*document.getElementById("userPasConfirm").style.borderColor = "#E34234"; --> Will be dom('#emailError').removeClass('hiden');*/
                }
                else {
                    dom("#passConfirmError").html('');                    
                    /*document.getElementById("userPasConfirm").style.borderColor = "#2F2F2F"; --> Will be dom('#emailError').addClass('hiden');*/
                }
            }

            function checkNick() {
                var userNick = dom('#userNick').elements[0].value;
                var userNickRegExp = /^\w{3,15}$/;
    
                if (userNick.search(userNickRegExp) == -1) {
                    dom("#nickError").html('This nickname is not valid');
                }

                else {
                    dom("#nickError").html('');
                
                    ajax({ url: 'ajax/checkUserNickname.php?nickname=' + userNick, 
                        parse_json: true, 
                        async: false, 
                        success: function(user) { 
                            if (user.data.length > 0) {
                                dom("#nickError").html('This nickname is already taken');
                            }
                            else {
                                dom("#nickError").html('');
                                /*document.getElementById("userNick").style.borderColor = "#2F2F2F"; --> Will be dom('#emailError').addClass('hiden');*/
                            }
                        }, 
                        error: function() { 
                
                        } 
                    });
                }
            }
        </script>

        <script src="js/dom.js" type="text/javascript"></script>
        <script src="js/validation.js" type="text/javascript"></script>
        <script src="js/ajax.js" type="text/javascript"></script>
        <script src="js/framework.js" type="text/javascript"></script>
    </body>

</html>